/* global styles */

@layer base {
  [x-cloak] {
    display: none !important;
  }

  :root {
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;

    scrollbar-color: theme(colors.gray.light.400) theme(colors.black / 0.05);
    &.dark {
      scrollbar-color: theme(colors.gray.dark.800) theme(colors.white / 0.10);
    }
  }

  mark {
    @apply bg-amber-light-200 dark:bg-amber-dark-600/25 dark:text-white;
  }
}

/* utility classes */

@layer utilities {
  .link {
    @apply text-blue-light underline underline-offset-2 dark:text-blue-dark;
  }

  .invertible {
    @apply dark:hue-rotate-180 dark:invert dark:filter;
  }

  .sidebar-hover {
    @apply hover:bg-gray-light-200 hover:dark:bg-gray-dark-200;
  }

  .sidebar-underline {
    @apply underline decoration-blue-light decoration-4 underline-offset-4 dark:decoration-blue-dark;
  }

  .bg-pattern-blue {
    background-color: theme(colors.white / 50%);
    background-image: url('/assets/images/bg-pattern-blue.webp');
    background-blend-mode: overlay;
    background-size: cover;
    background-repeat: none;
    .dark & {
      background-color: theme(colors.black / 70%);
    }
  }

  .bg-pattern-purple {
    background-color: theme(colors.white / 50%);
    background-image: url('/assets/images/bg-pattern-purple.webp');
    background-blend-mode: overlay;
    background-size: cover;
    background-repeat: none;
    .dark & {
      background-color: theme(colors.black / 70%);
    }
  }

  .bg-pattern-verde {
    background-color: theme(colors.white / 50%);
    background-image: url('/assets/images/bg-pattern-verde.webp');
    background-blend-mode: overlay;
    background-size: cover;
    background-repeat: none;
    .dark & {
      background-color: theme(colors.black / 70%);
    }
  }
}
